<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS实现一款响应式的时间轴效果</title>
</head>
<style>
  body {
    /* background: #3b4262; */
    color: #000;
    font-family: arial, sans-serif;
  }
  .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
  }
  .item .image {
    padding: 0 2em;
  }
  .item .image > div {
    position: relative;
    position: relative;
    text-align: center;
    font-size: 0.8em;
  }
  .item .image > div::after {
    content: '';
    width: 2.7em;
    height: 0;
    border-bottom: 1px solid #232b50;
    position: absolute;
    top: 2.75em;
    left: 5.5em;
    z-index: -1;
  }
  .item .image img {
    border-radius: 50%;
    height: 5em;
    border: 0.35em solid #00A6BC;
    z-index: 9;
  }
  .item .image span {
    display: block;
    clear: both;
    padding: 0.25em 0;
    margin: 0.5em 0;
    /* background: #3d4262; */
  }
  .item .details {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
  .item .details > div {
    border: 1px solid #232b50;
    border-radius: 0.5em;
    padding: 0;
    margin: 0 0 1em 0;
  }
  .item .details > div h1 {
    color: #00A6BC;
    font-size: 1.4em;
    margin: 0;
    padding: 0 0 0.5em 0;
    letter-spacing: 0.1em;
  }
  .item .details > div p {
    margin: 0;
    padding: 0;
    line-height: 150%;
  }
  .item .details::before {
    content: '';
    width: 0;
    /* height: 100%; */
    height: calc(100% - 4.4em);
    border-left: 1px solid #232b50;
    position: absolute;
    top: 4.4em;
    left: -4.35em;
    z-index: -1;
  }
</style>
<body>
  <div class="item">
    <div class="image">
      <div>
        <img src="http://www.webqdkf.com/wp-content/uploads/2023/04/logo-dark_collapsed@2x.png" />
        <span>
       2023-04-01
        </span>
      </div>
    </div>
    <div class="details">
      <div>
        <h1>30天快速入门HTML+CSS</h1>
        <p>第一天，我们一起来学习HTML简介与前端技术的介绍，以及相关问答，你为什么想要学习前端技术？</p>
        <p>第一天，我们一起来学习HTML简介与前端技术的介绍，以及相关问答，你为什么想要学习前端技术？</p>
        <p>第一天，我们一起来学习HTML简介与前端技术的介绍，以及相关问答，你为什么想要学习前端技术？</p>
        <p>第一天，我们一起来学习HTML简介与前端技术的介绍，以及相关问答，你为什么想要学习前端技术？</p>
        <p>第一天，我们一起来学习HTML简介与前端技术的介绍，以及相关问答，你为什么想要学习前端技术？</p>
        <p>第一天，我们一起来学习HTML简介与前端技术的介绍，以及相关问答，你为什么想要学习前端技术？</p>
        <p>第一天，我们一起来学习HTML简介与前端技术的介绍，以及相关问答，你为什么想要学习前端技术？</p>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <div>
        <img src="http://www.webqdkf.com/wp-content/uploads/2023/04/logo-dark_collapsed@2x.png" />
        <span>
          2023-04-02
        </span>
      </div>
    </div>
    <div class="details">
      <div>
        <h1>30天快速入门HTML+CSS</h1>
        <p> 第二天，我们一起来学习HTML简介与前端技术的介绍，以及相关问答，你为什么想要学习前端技术？</p>
      </div>
    </div>
  </div>
</body>
</html>